    <!-- Modal -->
    <div class="modal fade" id="addencoder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title newtranscodejob" id="myModalLabel" data-i18n="newtranscodejob.Select Encoder Output"></h4>
                </div>
                <div class="modal-body">
                    <label class="newtranscodejob" data-i18n="newtranscodejob.Select Encoder Output Type"></label></br>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="phone">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.Phone"></span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="pad">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.Pad"></span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="tv">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.TV"></span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="hdtv">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.HDTV"></span>
                        </label>
                    </div>
                    <label class="newtranscodejob" data-i18n="newtranscodejob.Select Encapsulation Type"></label></br>
                    <div class="checkbox">
                        <label>
                            <input type="radio" id="encapsulation" name="encapsulation" value="m3u8">
                            <span>m3u8</span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="radio" id="encapsulation" name="encapsulation" value="mp4">
                            <span>mp4</span>
                        </label>
                    </div></br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default newtranscodejob" data-dismiss="modal" data-i18n="newtranscodejob.Cancel"></button>
                    <button type="button" class="btn btn-primary newtranscodejob" id="createjob" data-i18n="newtranscodejob.OK"></button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row body_content">
            <div class="panel panel-primary">
                <div class="panel-heading newtranscodejob" data-i18n="newtranscodejob.New Transcode Job"></div>
                <div class="panel-body" id="newtranscodejob_content">
                    <ul class="list-group" id="transcodeinlist"></ul>
                    <button class="btn btn-primary pull-right newtranscodejob" data-toggle="modal" data-target="#addencoder" data-i18n="newtranscodejob.New Transcode Job"></button></br>
                </div>
            </div>
            <div id='new_transcode_job_holder'></div>
            <div id='transcode_job_holder' style="display: none;"></div>
            <div id='encoder_editor_holder' style="display: none;"></div>
        </div>
    </div>

    <script type="text/javascript">

    function refresh_transcode_in_list () {
        $.get ("/media/transcodeinlist", function (list) {
            for (var i = 0, media; media = list[i]; i++) {
                var li = '<li class=\"list-group-item\"><input type=\"checkbox\" id=\"mediacheckbox\" value=\"' + media + '\"> ' + media;
                $('#transcodeinlist').append(li);
            }
        });
    }

    $ (document).ready (function () {
        /* load configure */
        $.get ("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                bootbox.alert ("get configure failure: " + data.reason);
                return;
            }

            $.get ("/media/getmediadir", function (data) {
                Document.GstreamillConf.conf.transcoderoot = data.media_dir + "/transcode";
            });

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".newtranscodejob").i18n ();
            });

        });

        $("#createjob").click (function () {
            $.getJSON ("/admin/schemas/transcode_source_decodebin.json", function (job) {

                var file_list = $("#mediacheckbox:checked");
                if (file_list.length === 0) {
                    bootbox.alert ($.t ("newtranscodejob.Select Media Files Please"));
                    return;
                }

                var ischecked = {'phone': false, 'pad': false, 'tv': false, 'hdtv': false};
                var checked = $('#encoderoutput:checked');
                for (var i = 0; i < checked.length; i++) {
                    ischecked [checked[i].value] = true;
                }

                var encapsulation_value = $("#encapsulation:checked").val ();
                if (typeof encapsulation_value === "undefined") {
                    bootbox.alert ($.t ("newlivejob.Select Encapsulation Type"));
                    return;
                }

                var encoders = [];
                for (key in ischecked) {
                    if (ischecked[key]) {
                        $.ajax ({
                            type: "get",
                            url: "schemas/transcode_encoder_" + key + "_" + encapsulation_value + ".json",
                            dataType: "json",
                            async: false,
                            success: function (encoder) {
                                encoders.push (encoder);
                            }
                        });
                    }
                }

                var result = "";
                for (var i = 0; i < file_list.length; i++) {
                    var file = file_list[i].value;
                    var name = file.replace(/(\.[^.]*)/, ""); // extension name
                    job.name = name.replace(/( )/g, ""); // space
                    job["log-path"] = Document.GstreamillConf.conf.transcoderoot + "/out/" + file + "/";
                    job.source.elements.filesrc.property.location = Document.GstreamillConf.conf.transcoderoot + "/in/" + file;
                    if (encoders.length === 0) {
                        bootbox.alert ($.t("newtranscodejob.Select Encoder Output"));
                        return;
                    }
                    for (var j = 0, encoder; encoder = encoders[j]; j++) {
                        var path = Document.GstreamillConf.conf.transcoderoot + "/out/" + file + "/",
                            bitrate = encoder.elements.x264enc.property.bitrate;
                            resolution = encoder.elements.videoscale.caps.replace (/video\/x-raw,width=(\d+),height=(\d+)/g, "$1x$2");

                        if (encapsulation_value === "m3u8") {
                            encoder.elements.hlssink.property["playlist-location"] = path + resolution + "_" + bitrate + "/playlist.m3u8";
                            encoder.elements.hlssink.property.location = path + resolution + "_" + bitrate + "/segment%05d.ts";
                        } else if (encapsulation_value === "mp4") {
                            encoder.elements.filesink.property.location = path + resolution + "_" + bitrate + "bps.mp4";
                        }
                    }
                    job.encoders = encoders;
                    $.ajax ({
                        type: "post",
                        url: "/admin/start",
                        dataType: "json",
                        async: false,
                        data: JSON.stringify (job, null, 4),
                        success: function (response) {
                            if (response.result == "success") {
                                result += 'start ' + file + ' ' + response.result + '\n';
                            } else {
                                result += 'start ' + file + ' ' + response.result + ', ' + response.reason + '\n';
                            }
                        }
                    });
                }
                bootbox.alert (result, function () {
                    window.location.replace("joblist.html");
                });
            });
        });

        refresh_transcode_in_list ();
    });

    </script>
